<template>
    <div>
        <div id="apply">
            <!-- <div class="top-bg"></div> -->
            <van-nav-bar
            title=""
            fixed
            safe-area-inset-top
            >
            <template #left>
                <img class="nav-img" src="https://files.onestep6.com/cloud/cloud_icon.png" alt="">
            </template>
            </van-nav-bar>

            <!-- 顶部部分 -->
            <div class="header" :style="{ paddingTop: 0 + 'px' }">
                <div class="header-logo">
                    <img class="logo-img" src="https://files.onestep6.com/cloud/cloud_icon.png"  />
                </div>
                <div class="header-content">
                    <div class="header-left">
                        <div class="header-img">
                            <img :src="info.face || 'https://files.onestep6.com/2024/wxicon/img/0.png'" mode="" />
                        </div>
                        <div class="">
                            <div class="header-name">{{ info.realname? info.realname: `你好云上～`}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-c"></div>

            <div class="content">
                <div class="content-type">
                    <div class="type-flex" @click="onMyOrder(0)">
                        <img class="left-img" src="https://files.onestep6.com/cloud/my-order.png"  />
                        <div class="type-pad">
                            <div class="type-num">{{ info.order_count }}单</div>
                            <div class="type-txt">本月订单</div>
                        </div>
                    </div>
                    <div class="type-flex" @click="onMyOrder(0)">
                        <img class="right-img" src="https://files.onestep6.com/cloud/my-price.png"  />
                        <div class="type-pad">
                            <div class="type-num">{{ info.price_count }}元</div>
                            <div class="type-txt">采购流水</div>
                        </div>
                    </div>
                </div>
                <div class="content-gn">
                    <div class="gn-title">常用功能</div>
                    <div class="gn-item" @click="goBill">
                        <div class="item-left">
                            <img class="left-img" src="https://files.onestep6.com/cloud/cloud-my-order.png" alt="">
                            <div>账单管理</div>
                        </div>
                        <div class="item-right">
                            <div class="right-txt" v-if="info.dai_count > 0">{{ info.dai_count }}个账单待确认</div>
                            <img class="right-img" src="https://files.onestep6.com/cloud/order-right.png" alt="">
                        </div>
                    </div>
                    <div class="gn-item" @click="goRefund">
                        <div class="item-left">
                            <img class="left-img" src="https://files.onestep6.com/cloud/cloud-my-tk.png" alt="">
                            <div>退款明细</div>
                        </div>
                        <div class="item-right">
                            <img class="right-img" src="https://files.onestep6.com/cloud/order-right.png" alt="">
                        </div>
                    </div>
                    <div class="gn-item" @click="goAccount">
                        <div class="item-left">
                            <img class="left-img" src="https://files.onestep6.com/cloud/cloud-my-zh.png" alt="">
                            <div>账号信息</div>
                        </div>
                        <div class="item-right">
                            <img class="right-img" src="https://files.onestep6.com/cloud/order-right.png" alt="">
                        </div>
                    </div>
                    <div class="gn-item" @click="onPhone">
                        <div class="item-left">
                            <img class="left-img" src="https://files.onestep6.com/cloud/cloud-my-phone.png" alt="">
                            <div>平台负责人电话</div>
                        </div>
                        <div class="item-right">
                            <img class="right-img" src="https://files.onestep6.com/cloud/order-right.png" alt="">
                        </div>
                    </div>
                    <div class="gn-item item-no" @click="goSet">
                        <div class="item-left">
                            <img class="left-img" src="https://files.onestep6.com/cloud/cloud-my-set.png" alt="">
                            <div>系统设置</div>
                        </div>
                        <div class="item-right">
                            <img class="right-img" src="https://files.onestep6.com/cloud/order-right.png" alt="">
                        </div>
                    </div>
                </div>
            </div>


        </div>


        <tabbar :is_menu="is_admin == 1 ? true: false" :placeholder="false" />

        <popup-choose ref="popupChoose" :txt="`平台负责人电话：${info.phone}`" :phone="info.phone" right_txt="拨打" @right="onRight" />
    </div>
</template>
<script>
import tabbar from '@/components/tabbar.vue';
import popupChoose from "@/components/popupChoose.vue";
import { myInfo } from "@/api/cloud";
export default{
  components: {
    tabbar,
    popupChoose
  },
  data() {
    return {
      info: {},
      is_menu: false,
      is_admin: 0,
    }
  },
  mounted() {
    this.is_admin = localStorage.getItem('is_admin')
    this.myInfo()
  },
  methods: {
    async myInfo() {
        const res = await myInfo({})
        if (res.status == 1) {
            this.info = res.data;
        }
    },
    goAccount() {
        this.$router.push('/account')
    },
    goSet() {
        this.$router.push('/set')
    },
    onPhone() {
        this.$refs.popupChoose.show()
    },
    onRight() {

    },
    goBill() {
        localStorage.removeItem('is_active')
        this.$router.push('/bill')
    },
    goRefund() {
        this.$router.push('/refundList')
    },
    onMyOrder() {
        this.$router.push('/home')
    }
  }
}
</script>
<style lang="less" scoped>
div{
    box-sizing: border-box;
}
#apply{
    width: 100vw;
    min-height: 100vh;
    // padding-top: 92px;
    background: #FAFAFA;
    ::v-deep .van-nav-bar .van-icon{
        color: #323233;
    }
    ::v-deep .van-notice-bar{
        z-index: 6;
    }
    ::v-deep .van-hairline--bottom::after{
      border: none;
    }
    ::v-deep .van-nav-bar--fixed{
        background: transparent;
    }
}
.top-bg{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100vw;
    background: #FFFFFF;
    min-height: 65px;
    height: calc(65px+constant(safe-area-inset-top));
    height: calc(65px+env(safe-area-inset-top));
}
.nav-img{
  display: block;
  width: 139px;
	height: 34px;
}
.header-c{
    height: 510px;
}
.header{
    position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	height: 510px;
	background-color: #FDF4F1;
	background: linear-gradient( 98deg, #EBFCF4 0%, #F9F5F6 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.header-logo{
		display: flex;
		align-items: center;
		height: 88px;
		margin-bottom: 32px;
		.logo-img{
			display: block;
			width: 139px;
			height: 34px;
			margin-left: 32px;
		}
	}
	.header-content{
		display: flex;
		justify-content: space-between;
		padding: 0px 32px 0;
	}
	.header-left{
		display: flex;
	}
	.header-img{
		flex-shrink: 0;
		width: 96px;
		height: 96px;
		border-radius: 50%;
		margin-right: 24px;
		img{
			width: 100%;
			height:100%;
			border-radius: 50%;
		}
	}
	.header-name{
		font-size: 32px;
		line-height: 96px;
		font-weight: 600;
		color: #202630;
	}
	.header-des{
		font-size: 24px;
		line-height: 20px;
		color: #666666;
	}
}

.content{
    position: relative;
    z-index: 100;
	width: 100%;
	height: 1100px;
	margin: -250px auto 0;
	background: linear-gradient( 180deg, rgba(255,255,255,0.18) 0%, #FAFAFA 100%);

	.content-type{
		display: flex;
		justify-content: space-between;
		padding-left: 32px;
		padding-right: 16px;
		margin-bottom: 24px;
		.type-flex{
			display: flex;
			width: 340px;
			height: 120px;
			background: #FFFFFF;
			border-radius: 16px;
			overflow: hidden;
		}
		.left-img{
			display: block;
			width: 108px;
			height: 108px;
		}
		.right-img{
			display: block;
			width: 76px;
			height: 76px;
			margin-top: 24px;
			margin-right: 8px;
		}
		.type-pad{
			padding-top: 18px;
		}
		.type-num{
			font-size: 28px;
			line-height: 44px;
			color: #202630;
			font-weight: bold;
		}
		.type-txt{
			font-size: 28px;
			line-height: 44px;
			font-weight: 400;
			color: #798391;
		}
	}

    .content-gn{
        width: 702px;
        height: 560px;
        margin: 0 auto;
        background: #FFFFFF;
        border-radius: 16px;
        padding: 28px 26px 30px;
        .gn-title{
            font-size: 28px;
            line-height: 34px;
            font-weight: bold;
            color: #000000;
            margin-bottom: 24px;
        }
        .gn-item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 94px;
            border-bottom: 2px solid #F5F5F6;
            .item-left{
                display: flex;
                align-items: center;
                font-size: 24px;
                line-height: 30px;
                font-weight: bold;
                color: #202630;
                .left-img{
                    display: block;
                    width: 34px;
                    height: 34px;
                    margin-right: 18px;
                }
            }
            .item-right{
                display: flex;
                align-items: center;
                font-size: 20px;
                line-height: 24px;
                font-weight: 400;
                color: #798391;
                .right-img{
                    display: block;
                    height: 24px;
                    height: 24px;
                }
            }
        }
        .item-no{
            border:none;
        }
    }
}

</style>